<template>
	<view class="main">
		<!-- 搜索框 -->
		<view class="search">
			<uni-search-bar :focus="true" bgColor="#d8d8d8" cancelButton="none" style="width: 100%;">
			</uni-search-bar>
			<uni-icons type="scan" size="30" style="margin-top: 25rpx;margin-right: 10rpx;"></uni-icons>
		</view>
		<view class="body">
			<view class="bi" v-for="item in HotInfo" @click="to(item)">
				<view class="bih">
					<image :src="item.plantPic" style="height: 70%;object-fit: contain;border-radius: 20rpx;"
						mode="heightFix" />
				</view>
				<view class="bic">
					<view style="font-weight: 700;font-size: 30rpx;">{{item.name}}</view>
					<view style="font-weight: 500;font-size: 25rpx;">{{item.nickName}}</view>
					<view style="font-weight: 500;font-size: 10rpx;">{{item.createTime}}</view>
				</view>
			</view>

		</view>

		<!-- 悬浮按钮 -->
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" class="fab" />
	</view>
</template>

<script>
	import request from '@/common/request.js'
	export default {
		data() {
			return {
				title: 'uni-fab',
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#8cff4e',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: '/static/img/add.png',
						selectedIconPath: '/static/image-active.png',
						text: '发布',
						active: false
					},
					{
						iconPath: '/static/img/3.png',
						selectedIconPath: '/static/image-active.png',
						text: '星球',
						active: false
					},
				],
				HotInfo: []
			}
		},
		methods: {
			// 悬浮按钮点击事件
			fabClick(index) {
				for (let i = 0; i < this.content.length; i++) {
					this.content[i].active = (i === index)
				}
			},
			trigger(e) {
				if (e.index === 0) {
					uni.navigateTo({
						url: '../newArticle/newArticle'
					})
				} else if (e.index === 1) {
					console.log("index=2")
					uni.navigateTo({
						url: '../newPlanet/newPlanet'
					})
				}
			},
			to(e) {
				console.log(e);
				var id = e.id
				var image = e.plantPic
				var planetName = e.name
				uni.navigateTo({
					url: '/pages/View/planet/geren?id=' + id + '&image=' + image +'&planetName=' + planetName 
				})
			}
		},
		onLoad() {
			request('/plant/getMyJoinPlanet', '', 'GET').then((res) => {
				console.log(res);
				this.HotInfo = []
				var i = 0
				for (i; i < res.data.length; i++) {
					res.data[i].plantPic = 'http://118.24.29.136:9000/pic/' + res.data[i].plantPic
					this.HotInfo.push(res.data[i])
					console.log(this.HotInfo);
				}
			})
		}

	}
</script>

<style>
	.header {
		font-size: 100rpx;
		height: 100%;
		width: 100%;
	}

	.card_img {
		width: calc(100%);
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	/* 悬浮按钮 */
	.fab {}

	.search {
		background-color: white;
		overflow: hidden;
		width: 100%;
		height: 140rpx;
		padding-top: 50rpx;
		display: flex;
		position: fixed;
		top: 0rpx;
		z-index: 1;
	}

	.plant_item {
		width: 150rpx;
		height: 240rpx;
		border-radius: 40rpx;
		display: inline-block;
		margin-right: 50rpx;
		margin-bottom: 10rpx;
	}

	.scroll-view {
		white-space: nowrap;
		width: 100%;
	}

	.body {
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-evenly;
		flex-wrap: wrap;
		padding: 200rpx 0 50rpx 0;
	}

	.bi {
		height: 200rpx;
		width: 600rpx;
		border: 0.5rpx #cfcfcf solid;
		margin-bottom: 50rpx;
		box-shadow: 10rpx 5rpx 10rpx #919191;
		padding: 20rpx;
		display: flex;
	}

	.bih {
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bic {
		width: 70%;
		height: 100%;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}
</style>